<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="70px">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <!-- <el-form-item label="班级" prop="className">
                            <el-input v-model="query.className" placeholder="请输入" style="width:100%"></el-input>
                        </el-form-item> -->
                        <el-form-item label="班级" prop="classId">
                            <el-select v-model="query.classId" clearable placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in classList" :key="item.pId" :label="item.sNickName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <!-- <el-form-item label="商品名称" prop="goodsName">
                            <el-input v-model="query.goodsName" placeholder="请输入" style="width:100%"></el-input>
                        </el-form-item> -->
                        <el-form-item label="商品名称" prop="goodsId">
                            <el-select v-model="query.goodsId" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in goodsList" :key="item.pId" :label="item.sName" :value="item.pId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="月份" prop="timeDate">
                            <el-date-picker
                                :editable='false'
                                :clearable='false'
                                v-model="query.timeDate"
                                type="month"
                                style="width:100%"
                                placeholder="请选择">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <el-button @click="exportTable">导出</el-button>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%" >
                <el-table-column label="时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPayType | payType}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="支付人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPayUserName}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="班级" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.fIncrementId==123551?'课堂直播区域':scope.row.fIncrementId==123552?'全校':scope.row.sClassName }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="学生姓名" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPayTargetName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sIncrementName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="金额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sMoney}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="购买月数" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sMonth}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付状态" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sStatus == '0'?'已退回':scope.row.sStatus == '1'?'支付成功':'--'}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="订单号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sOrderNum}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import { pageIncrementCardCoupons, getClassList, queryGoodsName } from 'api/serviceManage';
    import { mapGetters, mapState, mapActions } from 'vuex';

    export default {
        name: 'orderDetails',
        components: { Levelbar, TableLayout},
        data() {
            return { 
                loading: true,  
                tableData: [],
                classList: [],
                goodsList: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    classId: '',
                    className: '',
                    goodsId: '',
                    goodsName: '',
                    timeDate: new Date()
                }
            }
        },
        created() {
            this.queryData();
            this.getClassListFu();
            this.queryGoodsNameFu();
        },
        computed: { 
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'token',
                'schoolId'
            ])
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            queryData() {
                let fSchoolId = this.schoolId;
                // let sClassName = this.query.className; // 班级名称
                // let sIncrementName = this.query.goodsName; // 商品名称
                let sClassId = this.query.classId; // 班级名称
                let sIncrementId = this.query.goodsId; // 商品名称
                let date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM'):''; // 查询的月份，如2017-10 
                pageIncrementCardCoupons(this.pageQuery.currentpage, this.config.pageSize, fSchoolId, sClassId, sIncrementId, date).then(res => {
                    this.loading = false;
                    this.tableData = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination.total;
                }).catch(() => {
                    this.loading = false;
                });
            },
            
            exportTable() {
               
                let fSchoolId = this.schoolId;
                // let sClassName = this.query.className; // 班级名称
                // let sIncrementName = this.query.goodsName; // 商品名称
                let sClassId = this.query.classId; 
                let sIncrementId = this.query.goodsId; 
                let token = this.token; 
                let date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM'):''; // 查询的月份，如2017-10
                window.location.href = `${LOCAL_API.cm}/education/incrementCard/exportIncrementCardCoupons?fSchoolId=${fSchoolId}&fClassId=${sClassId}&fIncrementId=${sIncrementId}&date=${date}&token=${token}`;
                
            },

            // 根据学校Id查询班级
            getClassListFu() {
                this.query.classId = '';
                this.classList = [];
                getClassList(this.schoolId).then(res => {
                    this.classList = res.data.content;
                    this.classList.unshift({ pId: '', sNickName: '请选择'});
                })
            },

            // 获取商品列表
            queryGoodsNameFu() {
                queryGoodsName().then(response => {
                    this.goodsList = [];
                    if (response.data.content) {
                        this.goodsList = response.data.content;
                    }
                    this.goodsList.unshift({ pId: '', sName: '请选择'});
                });
            }
        }

    }
</script>

<style lang="scss" scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        .app-levelbar {
            height: 35px;
        }
    }
</style>

